<!-- 节点树 Tree -->
<template>
  <a-card class="leftTree" title="节点树">
    <a-tree
      :default-selected-keys="[selectedKeys]"
      :default-expanded-keys="[expandedKeys]"
      :fieldNames="fieldNames"
      :data="treeData"
      @select="onSelect"
    >
      <template #icon="nodeData">
        <i v-if="nodeData.node.level < 4" :class="['iconfont', 'tree-node', renderNodeIcon(nodeData.node.level)]" />
      </template>
      <template #title="nodeData">
        <a-input
          ref="treeInput"
          v-if="nodeData.isEdit === 1"
          :style="{ width: '100%' }"
          v-model="nodeData.nodeName"
          max-length="8"
          allow-clear
          @blur="() => onIconEditClick(nodeData, 2)"
        />
        <span v-else>{{ nodeData.nodeName }}</span>
      </template>
      <template #extra="nodeData">
        <span v-if="isExtraShow">
          <IconPlusCircle v-if="nodeData.isEdit !== 1" class="right-icon" @click.stop="() => onIconClick(nodeData)" />
          <IconEdit
            v-if="nodeData.isEdit !== 1"
            class="right-icon"
            style="right: 30px"
            @click.stop="() => onIconEditClick(nodeData, 1)"
          />
          <IconDelete
            v-if="nodeData.isEdit !== 1"
            class="right-icon"
            style="right: 5px"
            @click.stop="() => onIconDeleteClick(nodeData)"
          />
        </span>
      </template>
    </a-tree>
  </a-card>
</template>
<script setup>
import { ref, nextTick, defineProps, toRefs, defineEmits } from 'vue'
import { Modal } from '@arco-design/web-vue'
import { IconPlusCircle, IconDelete, IconEdit } from '@arco-design/web-vue/es/icon'
const props = defineProps({
  treeData: Array,
  selectedKeys: {
    // 默认选中
    type: String,
    default: ''
  },
  expandedKeys: {
    // 默认展开
    type: String,
    default: ''
  },
  isExtraShow: {
    // 是否显示右侧操作
    type: Boolean,
    default: false
  },
  fieldNames: {
    // 自定义数据
    type: Object,
    default() {
      return {
        key: 'id',
        title: 'nodeName',
        children: 'childList'
      }
    }
  }
})
const { treeData, isExtraShow, selectedKeys, expandedKeys } = toRefs(props)
const emit = defineEmits(['funSelectNode', 'funCreateNode', 'funEditNode', 'funDeleteNode'])
// 点击节点
const onSelect = (newSelectedKeys, event) => {
  emit('funSelectNode', newSelectedKeys, event)
}
// 新建节点
const onIconClick = (nodeData) => {
  emit('funCreateNode', nodeData)
}
const treeInput = ref()
// 编辑节点
const onIconEditClick = (nodeData, type) => {
  if (type === 1) {
    nodeData.isEdit = 1
    nextTick(() => {
      treeInput.value.focus()
    })
  } else {
    nodeData.isEdit = 2
    emit('funEditNode', nodeData)
  }
}
// 删除节点
const onIconDeleteClick = (nodeData) => {
  Modal.confirm({
    title: '提示',
    content: '是否删除当前数据？',
    modalClass: 'tipModal',
    onOk: () => {
      emit('funDeleteNode', nodeData)
    }
  })
}
// 图标显示
const renderNodeIcon = (level) => {
  switch (+level) {
    case 1:
      return 'icon-zhongduanliebiao'
    case 2:
      return 'icon-weixing'
    case 3:
      return 'icon-huaban'
  }
}
</script>
<style lang="less" scoped>
.leftTree {
  height: 100%;
  width: 260px;
}
</style>
